<template>
    <el-container class="side-menu">
        <el-container style="width: 100%;" class="room-picker">
            <el-select v-model="shardValue" placeholder="select shard" style="width: 40%; margin: 5px;">
                <el-option v-for="item in shardOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <el-input placeholder="room name" v-model="roomName" style="width: 40%; margin: 5px;"></el-input>
        </el-container>
        <el-switch v-model="forceRandom" class="ml-2"
            style="--el-switch-on-color: #13ce66;
                 --el-switch-off-color: #ff4949;
                 margin-left: 50px;"
                 active-text="force random plan"; />
        <el-container class="coef-slider">
            <div class="slider-demo-block">
                <span class="demonstration">dc: {{ dc }}</span>
                <el-slider v-model="dc" :step="coefStep" max="2" />
            </div>
            <div class="slider-demo-block">
                <span class="demonstration">rc: {{ rc }}</span>
                <el-slider v-model="rc" :step="coefStep" max="2" />
            </div>
            <div class="slider-demo-block">
                <span class="demonstration">nc: {{ nc }}</span>
                <el-slider v-model="nc" :step="coefStep" max="2" />
            </div>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useGridStore } from '@/stores';

const shardOptions = [
    {value:0,label:'Shard 0'},
    {value:1,label:'Shard 1'},
    {value:2,label:'Shard 2'},
    {value:3,label:'Shard 3'},
]
const shardValue = ref(0)

const r1 = Math.floor(Math.random() * 50)
const r2 = Math.floor(Math.random() * 50)
const rt = (r1 + r2)%4
const dir = [['W','N'],['W','S'],['E','N'],['E','S']]
const roomName = ref(`${dir[rt][0]}${r1}${dir[rt][1]}${r2}`)

const dc = ref(0.5)
const rc = ref(0.5)
const nc = ref(0.5)
const coefStep = 0.05

const forceRandom = ref(false)

const timeDelay = ref(0)

const gridStore = useGridStore()

const submitRoomInfo = () =>{
    console.log(`submit room info: shard ${shardValue.value}, room ${roomName.value}`);
    gridStore.updateRoomInfo({shard: shardValue.value, roomName: roomName.value})
}

</script>

<style scoped>

.side-menu {
    background-color: darkolivegreen;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.room-picker {
    display: flex;
    justify-content: center;
    margin-top: 200px;
    height: auto;
    flex: 0;
}

.coef-slider {
    display: flex;
    flex-direction: column;
    /* 确保子元素垂直排列 */
    align-items: center;
    flex: 0;
}
.slider-demo-block {
    width: 80%;
    display: flex;
    align-items: center;
    border: 2px solid #343499;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 8px;
}

.slider-demo-block .demonstration {
    font-size: 24px;
    color: "#343499";
    line-height: 44px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

.slider-demo-block .demonstration+.el-slider {
    flex: 0 0 70%;
}

</style>
